<template>
  <el-col :class="className" :span="span">
    <el-form-item v-bind="$attrs">
      <slot />
      <template #label>
        <slot name="label" />
      </template>

      <template #error>
        <slot name="error" />
      </template>
    </el-form-item>
  </el-col>
</template>

<script setup>
import { inject, computed, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { formContextKey } from '@/components/form/utils.js'

defineOptions({
  inheritAttrs: false,
  name: 'QueryFormItem',
})

const instance = getCurrentInstance()
const props = defineProps({
  spanCol: {
    // 横跨列(当前表达独占几行，默认是一行)
    type: Number,
    default: 1,
  },
  span: {
    type: Number,
    default: null,
  },
})

const span = computed(() => {
  const form = formContext.form.value
  const span = props.span ?? form.span
  return Math.min(span * props.spanCol, 24)
})

const formItem = reactive({
  uid: instance.uid,
  index: null,
  visible: false,
  span,
})

const formContext = inject(formContextKey)

const className = computed(() => {
  return ['query-form-item', formItem.visible ? 'col-hide' : '']
})

onMounted(() => {
  formContext.registerForm(formItem)
})

onUnmounted(() => {
  formContext.unregisterForm(formItem.uid)
})
</script>

<style scoped lang="scss">
.col-hide {
  display: none;
}
</style>
